import { TUILogin } from '@tencentcloud/tui-core';
import { Chat } from '@tencentcloud/chat-uikit-react';
import { TUIConversationService } from '@tencentcloud/chat-uikit-engine';
import { UIKitProvider } from '@tencentcloud/uikit-base-component-react';
import '@tencentcloud/chat-uikit-react/dist/esm/index.css';
import styles from './index.less';
import { getKfUserId, getUserSig } from '@/services/tencentIm';
import { useRequest } from 'ahooks';
import { useEffect } from 'react';



export default function App() {
  const userInfo = JSON.parse(localStorage.getItem('userInfo'))
  const {data: kfUserUd} = useRequest(() => {
    return getKfUserId().then((res) => {
      return res.data;
    })
  })
  function openChat(kfUserUd) {
    // 1v1 chat: conversationID = 
    // group chat: conversationID = `GROUP${groupID}`
    const conversationID = `C2C${kfUserUd}`;
    TUIConversationService.switchConversation(conversationID);
  }
 
  if (!userInfo?.phone) return <div style={{ marginTop: 200, marginLeft: '50%'  }}>请先登陆</div>
  getUserSig({phone: userInfo?.phone}).then((res) => {
    if (res.code === 200) {
      const config = {
        SDKAppID: 1600064593, // Your SDKAppID, Get it from Step 4
        userID: res.data.imUserId, // Login UserID
        userSig: res.data.userSig
      }
      TUILogin.login({
        ...config,
        useUploadPlugin: true
      }).then(() => {
      }).catch(() => { });
    }
  })
  useEffect(() => {
    setTimeout(() => {
      openChat(kfUserUd)
    }, 1000)
  }, [kfUserUd])
  // language support en-US(default) / zh-CN / ja-JP / ko-KR / zh-TW
  // theme support light(default) / dark
  return (
    <div className={styles.page}>
        <div className={styles.content}>
            <UIKitProvider language='en-US' theme='light'>
                <Chat />
            </UIKitProvider>
        </div>
    </div>   
  );
}